<template>
  <div class="w-[100%] h-[100%]">

    <div class="mt-[0px]">
      <ContentWrap>
        <SearchBox :queryForm="searchList" :showExpland="false" @query="handleSearchQuery"
                   :show-export="false"/>
      </ContentWrap>
    </div>

    <div class="mt-[30px]">
      <el-button type="primary" color="#3721FF" round @click="handleBtnClick({ type:'add' })">+
        新增
      </el-button>
      <el-button type="primary" color="rgba(55,33,255,0.08)"
                 @click="handleBtnClick({ type:'importArea' })" style="color:#3721FF" round>批量导入
      </el-button>
    </div>

    <div class="mt-[30px]">
      <QueryTable
        pk="id"
        :list="dataList"
        :total="total"
        :btns="tableBtnList"
        @execute="handleBtnClick"
        v-model="queryParams"
        :thead="th"
        :show-action="true"
        :show-expand="false"
      />

    </div>

    <ComfirmPops ref="ConfirmPropsRef" :type="'radio'" @confirm="getConfirmValue" title="新增"
                 :show-icon="false" width="537">
      <template #content>
        <InfoAction ref="InfoActionRef" :info="selectedRow"/>
      </template>
    </ComfirmPops>

    <ComfirmPops ref="ConfirmPropsRef1" :type="'radio'" @confirm="getConfirmValue1" title="导入偏远地区"
                 :show-icon="false" width="537">
      <template #content>
        <ImportExcel ref="ExcelRef" :info="selectedRow"/>
      </template>
    </ComfirmPops>

  </div>
</template>
<script setup lang="ts">
import Icon from "@/components/Icon/src/Icon.vue"
import QueryTable from "@/components/TableData/index.vue"
import ImagePreview from "@/components/ImagePreview/index.vue"
import InfoAction from "./components/InfoAction.vue"
import ImportExcel from "./components/ImportExcel.vue"
import type {TradeOrderQueryVO} from "@/api/mall/trade/order";
import {DICT_TYPE, getIntDictOptions} from "@/utils/dict";
import type {PurchaseAdvice} from "@/api/purchase/advice/type";
import {throttle, confirmPromote} from "@/utils";
import {GlobeStateRemoteApi} from "@/api/logistics/remoteArea";
import {useMessage} from "@/hooks/web/useMessage";

const message = useMessage();

const InfoActionRef = ref(null)
const ConfirmPropsRef = ref(null)

const ExcelRef = ref(null)
const ConfirmPropsRef1 = ref(null)

const searchList: TradeOrderQueryVO[] = [
  {
    label: '偏远地区',
    code: 'stateRemoteName',
    type: 'input'
  },
]
const initQueryParams = {
  pageNo: 1, pageSize: 10
}

const tableBtnList = ref([
  {
    color: '#3721FF',
    code: 'edit',
    name: '编辑'
  },
  {
    color: '#FF4E00',
    code: 'delItem',
    name: '删除'
  }
]);


const th = ref([
  {
    name: '国家/地区',
    code: 'stateName',
  },
  {
    name: '一级区域',
    code: 'province',
  },
  {
    name: '二级区域',

    code: 'city',
  },

]);

const dataList = ref<PurchaseAdvice[]>([]);
const ids = ref<Array<string | number>>([]);
const total = ref(0);

const initRow = {}

const selectedRow = ref<PurchaseAdvice>({...initRow})

const isShowDialog = ref(false)


const queryParams = ref({
  ...initQueryParams
})

const handleSearchQuery = (val) => {
  /***
   * 搜索框查询条件，目前考虑在查询时 queryParams = {...val,pageNo:1,pageSize:10}
   * */
  queryParams.value = {
    ...initQueryParams,
    ...val
  }
  getList();
}

const handleBtnClick = e => {
  let type = e.type;
  try {
    fn[type](e)
  } catch (e) {
    console.log(`${type}不存在`)
  }
}

const fn = {
  add() {
    selectedRow.value = {}
    ConfirmPropsRef.value && ConfirmPropsRef.value.show();
  },
  edit({data}) {
    selectedRow.value = data.row;
    ConfirmPropsRef.value && ConfirmPropsRef.value.show();
  },
  delItem: throttle(async ({data}) => {
    await confirmPromote({
      content: "确认删除数据吗？"
    })

    console.log("111")

    await GlobeStateRemoteApi.deleteGlobeStateRemote(data.row.id);
    getList();

  }, 1000),
  importArea() {
    // 批量导入


    selectedRow.value = {}
    ConfirmPropsRef1.value && ConfirmPropsRef1.value.show();


  }
}


const getConfirmValue =async () => {
  InfoActionRef.value && await InfoActionRef.value.confirm();
  // 刷新列表
  getList();
  message.success('操作成功');
  ConfirmPropsRef.value && ConfirmPropsRef.value.hide();
}



const getConfirmValue1 =async () => {
  ExcelRef.value && await ExcelRef.value.confirm();
  // 刷新列表
  getList();
  message.success('导入成功');
  ConfirmPropsRef1.value && ConfirmPropsRef1.value.hide();
}


const getList = async () => {
  let res = await GlobeStateRemoteApi.getGlobeStateRemotePage(queryParams.value);
  dataList.value = res.list;
  total.value = res.total;
}

onMounted(() => {
  getList();
})

</script>
<style lang="scss" scoped>

</style>
